<template>
  <div v-if="overlayModal" class="guide-start-end-overlay">
    <div class="guide-modal">
      <div class="guide-header">
        <span>{{
          guideModalType === 'start' ? '欢迎进入新手指引' : '恭喜完成新手指引'
        }}</span>
        <a-tooltip>
          <template #title>
            关闭后不再提示
          </template>
          <span class="close-guide" @click="ignoreGuide">
            <a-icon-font type="iconicon-beifen1-copy" />
          </span>
        </a-tooltip>
      </div>
      <div class="guide-content">
        <div
          class="guide-item"
          :class="{ 'guide-end-item': guideModalType === 'end' }"
        >
          <div class="guide-image">
            <img src="~@/assets/user-guide/guide-data.png" alt="数据导入" />
          </div>
          <div class="item-text">
            <div class="item-text-title">1、数据导入</div>
            <div>将用户数据导入到平台数据管理中供项目使用</div>
          </div>
          <div
            :style="{ opacity: guideModalType === 'end' ? 0.6 : 0 }"
            class="finish-guide"
          >
            <a-icon type="check" :style="{ color: '#fff', fontSize: '24px' }" />
          </div>
        </div>
        <div
          class="guide-item"
          :class="{ 'guide-end-item': guideModalType === 'end' }"
        >
          <div class="guide-image">
            <img src="~@/assets/user-guide/guide-project.png" alt="项目创建" />
          </div>
          <div class="item-text">
            <div class="item-text-title">2、项目创建</div>
            <div>创建项目对导入的数据进行相应的处理和分析</div>
          </div>
          <div
            :style="{ opacity: guideModalType === 'end' ? 0.6 : 0 }"
            class="finish-guide"
          >
            <a-icon type="check" :style="{ color: '#fff', fontSize: '24px' }" />
          </div>
        </div>
      </div>
      <div class="guide-footer">
        <template v-if="guideModalType === 'start'">
          <a-tooltip>
            <template #title>
              跳过后不再提示
            </template>
            <span class="guide-ignore" @click="ignoreGuide">跳过</span>
          </a-tooltip>
          <span class="start-guide" @click="startGuide">开始探索</span>
        </template>
        <span v-else class="finish-guide" @click="finishGuide">完成</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import UserGuideStore from '@/store/modules/user-guide'
import UserStore from '@/store/modules/user'

@Component
export default class GuideStartEndModal extends Vue {
  @Prop() type!: string // 'start' / 'end'

  // 模态框 区分 开始 / 结束
  public get overlayModal() {
    return (
      UserGuideStore.overlayModal && UserGuideStore.guideModalType === this.type
    )
  }
  // 模态框 开始 / 结束
  public get guideModalType(): string {
    return UserGuideStore.guideModalType
  }

  /**
   * 跳过引导
   */
  public ignoreGuide() {
    this.finishGuide()
  }

  /**
   * 开始引导
   */
  public startGuide() {
    UserGuideStore.startNewUserGuide()
  }

  /**
   * 完成引导
   */
  public finishGuide() {
    if (UserStore.currentUser?.id) {
      UserGuideStore.ignoreUserGuide(UserStore.currentUser?.id)
    }
  }
}
</script>
<style lang="less" scoped>
.guide-start-end-overlay {
  align-items: center;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1000;

  .guide-modal {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 16px 0 rgba(9, 15, 91, 0.1);
    height: 438px;
    overflow: hidden;
    width: 606px;

    .guide-header {
      background-image: linear-gradient(108deg, #6973ff 3%, #808feb 100%);
      color: #fff;
      display: flex;
      font-size: 16px;
      font-weight: 500;
      height: 62px;
      justify-content: space-between;
      letter-spacing: 1px;
      line-height: 62px;
      padding: 0 30px;
      user-select: none;

      .close-guide {
        cursor: pointer;
      }
    }

    .guide-content {
      padding: 14px 20px 10px;

      .guide-item {
        align-items: center;
        display: flex;
        height: 146px;
        justify-content: space-between;
        margin-bottom: 10px;

        .guide-image {
          align-items: center;
          background: #fafafc;
          border-radius: 6px;
          display: flex;
          height: 126px;
          justify-content: center;
          margin: 10px 0 10px 10px;
          width: 226px;

          img {
            height: 102px;
            width: 206px;
          }
        }

        .item-text {
          color: #5d637e;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 1px;
          margin-bottom: 10px;
          user-select: none;
          width: 210px;

          .item-text-title {
            color: #373b52;
            font-size: 16px;
            font-weight: 500;
            height: 53px;
            letter-spacing: 1px;
            line-height: 63px;
          }
        }

        .finish-guide {
          align-items: center;
          background: #6973ff;
          border-radius: 0 6px 6px 0;
          display: flex;
          height: 100%;
          justify-content: center;
          width: 58px;
        }
      }

      // 完成引导
      .guide-end-item {
        background: #eceefd;
        border-radius: 6px;
      }
    }

    .guide-footer {
      align-items: center;
      display: flex;
      justify-content: flex-end;
      padding: 0 30px;

      .guide-ignore {
        color: #222432;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        height: 20px;
        letter-spacing: 1px;
        margin-right: 24px;
        opacity: 0.5;
        width: 30px;
      }

      .start-guide {
        color: #6973ff;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        height: 20px;
        letter-spacing: 1px;
        width: 60px;
      }

      .finish-guide {
        color: #6973ff;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        height: 20px;
        letter-spacing: 1px;
        width: 30px;
      }
    }
  }
}
</style>
